<template>
  <div class="home-container">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6" v-for="card in statisticsCards" :key="card.title">
        <el-card shadow="hover" class="statistics-card">
          <div class="card-content">
            <el-icon :size="40" :class="card.iconClass">
              <component :is="card.icon" />
            </el-icon>
            <div class="card-info">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <!-- 快捷操作 -->
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button
              v-for="action in quickActions"
              :key="action.name"
              :type="action.type"
              :icon="action.icon"
              @click="action.handler"
            >
              {{ action.name }}
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 系统公告 -->
      <el-col :span="16">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>系统公告</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(notice, index) in notices"
              :key="index"
              :timestamp="notice.time"
              :type="notice.type"
            >
              {{ notice.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 统计卡片数据
const statisticsCards = ref([
  {
    title: '学生总数',
    value: '1,234',
    icon: 'User',
    iconClass: 'icon-blue'
  },
  {
    title: '教师总数',
    value: '56',
    icon: 'UserFilled',
    iconClass: 'icon-green'
  },
  {
    title: '课程总数',
    value: '89',
    icon: 'Document',
    iconClass: 'icon-orange'
  },
  {
    title: '班级总数',
    value: '45',
    icon: 'School',
    iconClass: 'icon-purple'
  }
])

// 快捷操作
const quickActions = [
  {
    name: '添加学生',
    type: 'primary',
    icon: 'Plus',
    handler: () => router.push('/dashboard/students')
  },
  {
    name: '成绩录入',
    type: 'success',
    icon: 'Edit',
    handler: () => router.push('/dashboard/scores')
  },
  {
    name: '系统设置',
    type: 'info',
    icon: 'Setting',
    handler: () => router.push('/dashboard/system')
  }
]

// 系统公告
const notices = ref([
  {
    content: '新学期开始了，请各位老师及时更新学生信息',
    time: '2024-03-01',
    type: 'primary'
  },
  {
    content: '期末考试成绩已开放查询，请及时处理学生反馈',
    time: '2024-02-28',
    type: 'success'
  },
  {
    content: '系统将于本周日进行维护升级，请提前做好准备',
    time: '2024-02-25',
    type: 'warning'
  }
])
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.statistics-card {
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-info {
  margin-left: 20px;
}

.card-title {
  font-size: 14px;
  color: #909399;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 5px;
}

.icon-blue {
  color: #409EFF;
}

.icon-green {
  color: #67C23A;
}

.icon-orange {
  color: #E6A23C;
}

.icon-purple {
  color: #909399;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 